<template>
  <div class="home">
    <div class="box tophome" style="height: 17vh">
      <div class="home1" style="height: 17vh">
        <div class="home1_1">
          <div class="_l"></div>
          <p>常规操作</p>
        </div>
        <!-- 按钮 -->
        <div class="button_box">
          <el-button
            v-for="(item, i) in List"
            :key="i"
            class="_button"
            type="primary"
            plain
            @click="btnClick(item)"
            >{{ item.permissionName }}</el-button
          >
        </div>
      </div>
      <div class="home1" style="height: 17vh">
        <div class="home1_1">
          <div class="_l"></div>
          <p>客户在途调货单</p>
        </div>
        <div class="home1_2">
          <p>5天内</p>
          <p>超5天</p>
        </div>
        <div class="content_box">
          <span>
            <p>{{ sum1 }}</p>
            <p>件数</p>
          </span>
          <span>
            <p>{{ sum2 }}</p>
            <p>金额</p>
          </span>
          <span>
            <p>{{ sum3 }}</p>
            <p>调入客户</p>
          </span>
          <span>
            <p>{{ sum4 }}</p>
            <p>调出客户</p>
          </span>
          <span></span>
          <span>
            <p>{{ sum5 }}</p>
            <p>件数</p>
          </span>
          <span>
            <p>{{ sum6 }}</p>
            <p>金额</p>
          </span>
        </div>
      </div>
    </div>

    <div class="box chartBox">
      <div class="home1">
        <!-- 上面的标识框 -->
        <div class="home1_1">
          <div class="_l"></div>
          <p>销售统计</p>
          <el-date-picker
            v-model="dateList1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <el-select v-model="monthValue1" class="month">
            <el-option
              v-for="item in monthList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 线型图 -->
        <div>
          <span class="radioSpan">
            <el-radio v-model="radio1" label="1">金额</el-radio>
            <el-radio v-model="radio1" label="2">数量</el-radio>
          </span>
          <span class="rightSpan"></span>
          <ve-line
            :data="chartData1"
            :colors="colors1"
            height="35vh"
            :mark-line="markLine1"
            :extend="chartExtend1"
          ></ve-line>
        </div>
      </div>
      <div class="home1">
        <!-- 上面的标识框 -->
        <div class="home1_1">
          <div class="_l"></div>
          <p>销售排行榜</p>
          <el-date-picker
            v-model="dateList2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <el-select
            v-model="monthValue2"
            class="month"
            @change="_indexInputTotal"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 线型图 -->
        <div>
          <span class="radioSpan">
            <el-radio v-model="radio2" label="1">数量</el-radio>
            <el-radio v-model="radio2" label="2">金额</el-radio>
          </span>
          <ve-bar
            :data="chartData2"
            :colors="colors1"
            :extend="chartExtend2"
            height="35vh"
            :mark-line="markLine2"
          ></ve-bar>
        </div>
      </div>
    </div>

    <div class="box chartBox">
      <div class="home1">
        <!-- 上面的标识框 -->
        <div class="home1_1">
          <div class="_l"></div>
          <p>销售同比分析</p>
          <span class="radioSpan">
            <el-radio v-model="radio3" label="1">金额</el-radio>
            <el-radio v-model="radio3" label="2">数量</el-radio>
          </span>
        </div>
        <!-- 线型图 -->
        <div>
          <span class="rightSpan"></span>
          <ve-histogram
            :data="chartData3"
            height="35vh"
            :legend="legend3"
            :extend="chartExtend3"
            ref="table3"
          ></ve-histogram>
        </div>
      </div>
      <!-- 上面的标识框 -->
      <!--  饼状图-->
      <div class="home1">
        <div class="home1_1">
          <div class="_l"></div>
          <p>品类销售比</p>
        </div>
        <div class="ringChart" style="width: 90%">
          <span class="ringSpan" v-show="maxCommodity">
            <p>{{ maxCommodity }}</p>
            <p>{{ ((maxNumber / sum) * 100).toFixed(2) }}%</p>
          </span>
          <ve-ring
            :data="chartData4"
            :settings="chartSettings4"
            :legend="legend4"
            height="35vh"
            :colors="colors4"
            :extend="chartExtend4"
          ></ve-ring>
        </div>

        <div style="width: 10%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMenuList,
  onTheWayByFiveDay,
  indexSellTotal,
  indexInputTotal,
  indexSellAnalysis,
  commodityTypeSell
} from '../../network/home'
import { getCommodityType } from '../../network/commodity'

import today from '../../components/mixins/today'

export default {
  mixins: [today],
  created() {
    // console.log(this.$md5('011123456'), 'md5')
    // return
    let year = new Date().getFullYear() + '-01-01 00:00:00'
    this.dateList1 = [year, this.getNowTime()]
    this.dateList2 = [year, this.getNowTime()]

    this.int = setInterval(() => {
      this.randomData = Math.ceil(Math.random() * 1000)
      if (!this.realData1)
        this.chartData1.rows = [
          {
            月: '01月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '02月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '03月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '04月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '05月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '06月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '07月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '08月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '09月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '10月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '11月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '12月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          }
        ]
      if (!this.realData2)
        this.chartData2.rows = [
          {
            客户: '客户01',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户02',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户03',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户04',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户05',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户06',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户07',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户08',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户09',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户10',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          }
        ]
      if (!this.realData3) {
        this.chartData3.rows = [
          {
            月: '01月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '02月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '03月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '04月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '05月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '06月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '07月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '08月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '09月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '10月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '11月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '12月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          }
        ]
        // this.chart3MarkLine()
      }
      if (!this.realData4)
        this.chartData4.rows = [
          {
            commodityTypeName: 'A',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'B',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'C',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'D',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'E',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'F',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'G',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'H',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          }
        ]
    }, 2000)

    getCommodityType({ limit: 999, page: 1 }).then((res) => {
      if (res.data.code == 200 && res.data.data) {
        this.categoryMap = {}
        res.data.data.forEach((e) => {
          this.categoryMap[e.no] = e.type
        })
      }
    })

    getMenuList().then((res) => {
      // console.log(res)
      this.List = res.data.data
    })
    onTheWayByFiveDay().then((res) => {
      // console.log(res)
      this.sum1 = res.data.data.fiveInnerTransferCargoNumber
      this.sum2 = res.data.data.fiveInnerTransferCargoMoney
      this.sum3 = res.data.data.foldPersonNumber
      this.sum4 = res.data.data.calloutPersonNumber
      this.sum5 = res.data.data.fiveOuterTransferCargoNumber
      this.sum6 = res.data.data.fiveOuterTransferCargoMoney
    })
    indexSellAnalysis().then((res) => {
      // console.log(res)
      if (res.data.code == 200 && res.data.data.length) {
        this.realData3 = true
        let tmpList = []
        let tmpColums = []
        tmpColums = []
        res.data.data.forEach((element) => {
          let yearStr = element.yearMonth.split('-')[0]
          let e = {}
          e[yearStr + 'Money'] = element.monthSellMoney
          e[yearStr + 'Number'] = element.monthSellNumber
          e.月 = element.yearMonth.split('-')[1] + '月'

          if (!tmpColums.length) {
            tmpColums.push(yearStr)
          } else {
            if (tmpColums.indexOf(yearStr) == -1) {
              tmpColums.push(yearStr)
            }
          }

          if (tmpList.length) {
            let existMonth = 0
            for (const i of tmpList) {
              existMonth = 0
              if (i.月 == e.月) {
                i[yearStr + 'Money'] = element.monthSellMoney
                i[yearStr + 'Number'] = element.monthSellNumber
                existMonth = 1
                break
              }
            }
            if (!existMonth) {
              tmpList.push(e)
            }
          } else {
            tmpList.push(e)
          }
        })
        tmpColums.sort((a, b) => {
          return a - b
        })
        this.legend3.data = tmpColums
        tmpColums.unshift('月')
        this.chartData3.columns = tmpColums
        this.chartData3.rows = tmpList.sort((a, b) => {
          return a.月.localeCompare(b.月)
        })

        this.radio3Change(this.radio3)
      }
    })
    commodityTypeSell().then((res) => {
      // console.log(res)
      if (res.data.code && res.data.data.length) {
        this.realData4 = true
        res.data.data.sort((a, b) => {
          return b.commodityTypeNumber - a.commodityTypeNumber
        })
        res.data.data.forEach((e) => {
          if (this.maxNumber == 0) {
            this.maxNumber = e.commodityTypeNumber
            this.maxCommodity = e.commodityTypeName
          }
          this.sum += e.commodityTypeNumber
        })

        res.data.data.sort((a, b) => {
          return b.commodityTypeNumber - a.commodityTypeNumber
        })
        this.chartData4.rows = res.data.data.slice(0, 8)
      }
    })
  },
  data() {
    this.colors1 = ['#017aff']
    this.colors4 = [
      '#7166FF',
      '#6494FF',
      '#60E4E9',
      '#4AE51F',
      '#FFE73C',
      '#FF9C1A',
      '#FF6666',
      '#D566FF'
    ]
    // 环形图的配置项
    this.chartSettings4 = {
      radius: [40, 100],
      offsetY: 160,
      legendLimit: 1
    }

    this.markLine1 = {
      label: {
        position: 'insideEndTop'
      },
      data: [
        {
          name: '最大值',
          type: 'max'
        },
        {
          name: '最小值',
          type: 'min'
        },
        {
          name: '平均线',
          type: 'average'
        }
      ]
    }
    this.markLine2 = {
      label: {},
      data: [
        {
          name: '最大值',
          type: 'max'
        },
        {
          name: '最小值',
          type: 'min'
        },
        {
          name: '平均线',
          type: 'average'
        }
      ]
    }
    this.markLine3 = {
      label: {
        position: 'insideEndTop'
      },
      data: [
        // [
        //   {
        //     yAxis: 'max',
        //     x: '6%'
        //   },
        //   {
        //     type: 'max'
        //   }
        // ],
        // [
        //   {
        //     yAxis: 'min',
        //     x: '6%'
        //   },
        //   {
        //     type: 'min'
        //   }
        // ],
        // [
        //   {
        //     yAxis: 'average',
        //     x: '6%'
        //   },
        //   {
        //     type: 'average'
        //   }
        // ],

        {
          name: '最大值',
          type: 'max'
        },
        {
          name: '最小值',
          type: 'min'
        },
        {
          name: '平均线',
          type: 'average'
        }
      ]
    }

    this.chartExtend1 = {
      series: {
        type: 'line',
        smooth: 0
        // markLine:{
        //   // data: [
        //   //   {x:0},{x:200}
        //   // ]
        // }
      }
    }
    this.chartExtend2 = {
      series: {
        type: 'bar',
        barWidth: 10,
        width: '90%'
      }
    }
    this.chartExtend3 = {
      // series: {
      //   type: 'bar',
      //   barWidth: 10,
      // }
      series(v) {
        if (v.length == 1) {
          v[0].barWidth = 10
          v[0].markLine = {
            label: {
              position: 'insideEndTop'
            },
            lineStyle: {
              color: '#017aff'
            },
            data: [
              { name: '最大值', type: 'max' },
              { name: '最小值', type: 'min' },
              { name: '平均线', type: 'average' }
            ]
          }
          return v
        } else if (v.length == 1) {
          v[0].barWidth = 10
          v[1].barWidth = 10
          v[1].markLine = {
            label: {
              position: 'insideEndTop'
            },
            lineStyle: {
              color: '#017aff'
            },
            data: [
              { name: '最大值', type: 'max' },
              { name: '最小值', type: 'min' },
              { name: '平均线', type: 'average' }
            ]
          }
          return v
        } else {
          v[0].barWidth = 10
          v[1].barWidth = 10
          v[2].barWidth = 10
          v[2].markLine = {
            label: {
              position: 'insideEndTop'
            },
            lineStyle: {
              color: '#017aff'
            },
            data: [
              { name: '最大值', type: 'max' },
              { name: '最小值', type: 'min' },
              { name: '平均线', type: 'average' }
            ]
          }
          return v
        }
      }
    }
    this.chartExtend4 = {
      series: {
        type: 'pie',
        left: 'left',
        width: '50%'
      }
    }

    this.legend3 = {
      data: ['2019', '2020', '2021']
    }
    this.legend4 = {
      icon: 'circle',
      left: 'right',
      top: 'middle',
      orient: 'vertical',
      align: 'left',
      padding: [0, 20],
      itemWidth: 35,
      itemGap: 40,
      height: '200',
      formatter: (name) => {
        // console.log(name)
        // let tmpArr = name.split('|')
        // let lenDif = (6 - tmpArr[0].length)*2
        // for (let i = 0; i < lenDif; i++) {
        //   tmpArr[0] += ' '
        // }
        return this.categoryMap[name]
          ? name + '：' + this.categoryMap[name]
          : name
      }
    }
    return {
      int: {},
      dataEmpty: true,
      dateList1: [],
      dateList2: [],
      monthValue1: 'month',
      monthValue2: 1,
      monthList: [
        {
          label: '按月',
          value: 'month'
        },
        {
          label: '按年',
          value: 'year'
        }
      ],
      typeList: [
        { value: 1, label: '厂商' },
        { value: 0, label: '客户' }
      ],
      List: [],
      randomData: Math.ceil(Math.random() * 1000),
      realData1: false,
      realData2: false,
      realData3: false,
      realData4: false,
      chartData1: {
        columns: ['月', '金额'],
        rows: [
          {
            月: '01月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '02月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '03月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '04月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '05月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '06月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '07月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '08月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '09月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '10月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '11月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            月: '12月',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          }
        ]
      },
      chartData2: {
        columns: ['客户', '金额'],
        rows: [
          {
            客户: '客户01',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户02',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户03',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户04',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户05',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户06',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户07',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户08',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户09',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          },
          {
            客户: '客户10',
            金额: this.randomData * Math.ceil(Math.random() * 10),
            数量: this.randomData * Math.ceil(Math.random() * 10)
          }
        ]
      },
      chartData3: {
        columns: ['月', '2021', '2019', '2020'],
        rows: [
          {
            月: '01月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '02月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '03月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '04月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '05月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '06月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '07月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '08月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '09月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '10月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '11月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          },
          {
            月: '12月',
            2021: this.randomData * Math.ceil(Math.random() * 3),
            2019: this.randomData * Math.ceil(Math.random() * 6),
            2020: this.randomData * Math.ceil(Math.random() * 9)
          }
        ]
      },
      chartData4: {
        columns: ['commodityTypeName', 'commodityTypeNumber'],
        rows: [
          {
            commodityTypeName: 'A',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'B',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'C',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'D',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'E',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'F',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'G',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          },
          {
            commodityTypeName: 'H',
            commodityTypeNumber: Math.ceil(
              this.randomData / Math.ceil(Math.random() * 10)
            )
          }
        ]
      },
      maxNumber: 0,
      maxCommodity: '',
      sum: 0,
      chart3max: 0,
      chart3min: 0,
      chart3average: 0,

      radio1: '1',
      radio2: '1',
      radio3: '1',

      sum1: 0,
      sum2: 0,
      sum3: 0,
      sum4: 0,
      sum5: 0,
      sum6: 0,

      monthData: [],
      yearData: [],

      categoryMap: {}
    }
  },
  watch: {
    dateList1(a, b) {
      if (a[0].slice(0, 4) != a[1].slice(0, 4)) {
        this.$message.error('禁止跨年查询')
        return
      }
      this._indexSellTotal()
    },
    dateList2() {
      this._indexInputTotal()
    },
    radio1(a, b) {
      switch (a) {
        case '1':
          this.chartData1.columns[1] = '金额'
          break
        case '2':
          this.chartData1.columns[1] = '数量'
          break
      }
      let tmp = []
      tmp = this.chartData1.rows
      this.chartData1.rows = []
      this.chartData1.rows = tmp
    },
    monthValue1(a, b) {
      switch (a) {
        case 'month':
          this.chartData1.columns[0] = '月'
          this.chartData1.rows = this.monthData
          break
        case 'year':
          this.chartData1.columns[0] = '年'
          this.chartData1.rows = this.yearData
          break
      }
    },
    radio2(a, b) {
      this.radio2Change(a)
    },
    radio3(a, b) {
      this.radio3Change(a)
    }
  },
  methods: {
    btnClick(item) {
      this.$router.push(item.href)
      this.$store.commit('addNav', {
        label: item.permissionName,
        name: item.href.split('/')[2]
      })
    },
    _indexSellTotal() {
      indexSellTotal({
        startTime: this.dateList1[0],
        endTime: this.dateList1[1].slice(0, 10) + ' 23:59:59'
      }).then((res) => {
        // console.log(res)
        if (res.data.code == 200 && res.data.data.length) {
          this.realData1 = true
          res.data.data.forEach((e) => {
            e.金额 = e.monthSellMoney
            e.数量 = e.monthSellNumber
            e.月 = e.yearMonth.split('-')[1] + '月'
          })
          this.monthData = res.data.data
          this.radio1 = '1'
          this.monthValue1 = 'month'
          this.chartData1.rows = this.monthData
          let exist = 0
          this.yearData = []
          res.data.data.forEach((e) => {
            if (!this.yearData.length) {
              this.yearData.push({
                年: e.yearMonth.split('-')[0],
                金额: e.monthSellMoney,
                数量: e.monthSellNumber
              })
            } else {
              for (const i of this.yearData) {
                if (i.年 == e.yearMonth.split('-')[0]) {
                  i.金额 += e.monthSellMoney
                  i.数量 += e.monthSellNumber
                  exist = 1
                  break
                } else {
                  exist = 0
                }
              }
              if (!exist) {
                this.yearData.push({
                  年: e.yearMonth.split('-')[0],
                  金额: e.monthSellMoney,
                  数量: e.monthSellNumber
                })
              }
            }
          })
          this.yearData.sort((a, b) => {
            return a.年 - b.年
          })
        } else {
          this.monthData = []
          this.yearData = []
          this.chartData1.rows = []
        }
      })
    },
    _indexInputTotal() {
      indexInputTotal({
        startTime: this.dateList2[0],
        endTime: this.dateList2[1],
        type: this.monthValue2
      }).then((res) => {
        // console.log(res)
        if (res.data.code == 200 && JSON.stringify(res.data.data) != '{}') {
          this.realData2 = true
          let tmpList = []
          for (const key in res.data.data) {
            if (res.data.data.hasOwnProperty(key)) {
              const element = res.data.data[key]
              element.客户 = key
              element.数量 = element.number
              element.金额 = element.money
              tmpList.push(element)
            }
          }
          // console.log(tmpList)
          tmpList.sort((a, b) => {
            return b.number - a.number
          })

          this.chartData2.rows = tmpList.splice(0, 10)
          this.radio2Change(this.radio2)
        }
      })
    },
    radio2Change(a) {
      switch (a) {
        case '1':
          this.chartData2.columns = ['客户', '数量']
          this.chartData2.rows.sort((a, b) => {
            return a.number - b.number
          })
          break
        case '2':
          this.chartData2.columns = ['客户', '金额']
          this.chartData2.rows.sort((a, b) => {
            return a.money - b.money
          })
          break
      }
    },
    radio3Change(a) {
      let columns = this.chartData3.columns.slice(1)
      let tmpList = this.chartData3.rows
      this.chartData3.rows = []
      switch (a) {
        case '1':
          tmpList.forEach((e) => {
            for (const i of columns) {
              e[i] = e[i + 'Money'] || 0
            }
          })
          break
        case '2':
          tmpList.forEach((e) => {
            for (const i of columns) {
              e[i] = e[i + 'Number'] || 0
            }
          })
          break
      }
      this.chartData3.rows = tmpList
    },
    chart3MarkLine() {
      let sum = 0
      let num = 0
      this.chartData3.rows.forEach((e) => {
        this.chartData3.columns.forEach((y) => {
          if (!isNaN(e[y])) {
            if (e[y] > this.chart3max) {
              this.chart3max = e[y]
            }
            if (this.chart3min < e[y] || this.chart3min == 0) {
              this.chart3min = e[y]
            }
            sum += e[y]
            num++
          }
        })
      })
      this.chart3average = (sum / num).toFixed(2)
      this.markLine3.data = [
        [
          {
            x: '6%',
            yAxis: 'max'
          },
          {
            // name: this.chart3max,
            x: '98%',
            yAxis: 'max'
          }
        ]
      ]
    }
  },
  mounted() {
    if (this.realData1 && this.realData2 && this.realData3 && this.realData4) {
      clearInterval(this.int)
    }
  }
}
</script>

<style scoped>
.home {
  margin-right: 0.5vw;
  height: 95vh;
}
.box {
  display: flex;
}
.box + .box {
  margin-top: 0.5vw;
}
.box .home1:first-child {
  margin-right: 0.5vw;
}

.home1 {
  width: 50%;
  height: 37vh;
  background: white;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.chartBox .home1 > div:nth-child(2) {
  width: 100%;
  height: 290px;
  overflow-y: hidden;
  /* background-color: lavender; */
}

.home1_1 {
  width: 100%;
  height: 30px;
  display: flex;
  position: relative;
  border-bottom: 2px solid#f4f4f4;
}

._l {
  width: 4px;
  height: 14px;
  background: #017aff;
  position: absolute;
  top: 7px;
  left: 20px;
}

.home1_1 p {
  position: absolute;
  font-size: 15px;
  top: 3px;
  left: 30px;
}
.home1_2 {
  padding: 0 20px;
  margin: 10px 0;
  white-space: nowrap;
}
.home1_2 p {
  display: inline-block;
  background-color: #e6f2fe;
  color: #017aff;
  border-radius: 15px;
  width: 70px;
  text-align: center;
}
.home1_2 p:first-child {
  margin-right: 480px;
}

.month {
  width: 110px;
  position: absolute;
  right: -10px;
  top: 2px;
}

._button {
  padding: 0;
  height: 40px;
  margin: 10px;
}

.button_box {
  position: absolute;
  bottom: 15px;
  right: 22px;
  width: 95%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}

.button_box_1 {
  display: flex;
  margin: 37px 0 5px 0;
  width: 100%;
  white-space: nowrap;
}

.button_box_2 {
  display: flex;
  margin: 0 auto;
  width: 100%;
  white-space: nowrap;
}

.content_box {
  height: 120px;
  position: relative;
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
}

.radioSpan {
  background-color: white;
  position: absolute;
  left: 42%;
  z-index: 1;
}
.rightSpan {
  background-color: white;
  width: 10px;
  height: 285px;
  position: absolute;
  left: 99%;
  z-index: 1;
}
.ringSpan {
  color: #7166ff;
  font-size: 20;
  position: absolute;
  left: 19.3%;
  top: 49%;
  z-index: 1;
}
.ringSpan p {
  text-align: center;
}

.content_box span {
  width: 15%;
  /* background-color: aquamarine; */
}
.content_box span:nth-child(5) {
  width: 2px;
  background-color: #f4f4f4;
}
.content_box span p {
  text-align: center;
}
.content_box span p:first-child {
  font-size: 28px;
  color: #017aff;
}

.ringChart {
  display: inline-block;
  width: 50%;
  overflow: hidden;
}
</style>

<style>
.home .el-input--suffix {
  width: 90px;
}
.home .home1_1 .el-input__inner {
  height: 25px;
  line-height: 20px !important;
}
.home .el-input__icon {
  line-height: 20px;
}
.home .el-button {
  height: 35px;
}
.home .el-date-editor {
  left: 240px;
  top: 2px;
}
.home .el-date-editor .el-range-separator {
  width: 10%;
  line-height: 18px;
}
</style>
